import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Text } from '@nova-hf/ui';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { IContext } from 'beta/typings/context';
import { serviceColorMap } from 'beta/utils/helpers';
import { inject, observer } from 'mobx-react';
import {
  ContractStatus,
  ServiceType,
  useApplicableProductsQuery,
  useContractsForApplicableVariantsQuery,
  useCustomerIsCompanyLazyQuery,
  useGetServiceTypeQuery,
} from 'typings/graphql';

import { CardItem } from '../components/SellingCardItem';
import { ConfirmInternetAndAbroad, InternetAndAbroadOverview } from '../containers';
import { ChangePlan } from '../containers/ConfirmInternetAndAbroad';
import { useFetchProducts } from '../hooks/useFetchProducts';

import SelectContractType from './components/SelectContractType';

type ThjonustleidabreytingProps = {
  customerId: string;
  serviceId: string;
};

const Thjonustleidabreyting = ({ customerId, serviceId }: ThjonustleidabreytingProps) => {
  const { t } = useTranslation('thjonustubreyting');
  const [selectedVariant, setSelectedVariant] = useState<CardItem>();
  const [selectedContractItem, setselectedContractItem] = useState('frelsi');
  const [getIsCustomerCompany, { data: isCompany }] = useCustomerIsCompanyLazyQuery();

  const { data } = useGetServiceTypeQuery({
    variables: {
      serviceId,
    },
  });
  const { data: applicableProductsData } = useApplicableProductsQuery({
    variables: {
      input: {
        serviceId,
      },
    },
  });

  const type = data?.service.type as ServiceType;
  const { data: contractData } = useContractsForApplicableVariantsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
    onCompleted: (data) => {
      const contract = data?.contracts.contracts.find(
        (contract) =>
          contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
      );
      if (contract) {
        getIsCustomerCompany({
          variables: { input: { nationalId: contract.payer?.nationalId } },
        });
      }
    },
  });
  const contract = contractData?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const variant = contract?.variant;
  const isAlltSaman = variant?.id.toLowerCase().includes('allt-saman');

  const { productAsCardItem, currentContractAsCardItem } = useFetchProducts({
    customerId,
    serviceId,
    categoryType: selectedContractItem,
  });

  const handleSelectVariant = (variant: CardItem) => {
    if (selectedVariant?.id === variant.id) {
      setSelectedVariant(undefined);
    } else {
      setSelectedVariant(variant);
    }
  };

  return (
    <StepWrapper
      button={{
        text: t('breytaThjonustu.sidemenuButton'),
        renderAs: 'a',
        colorScheme: 'black100',
        icon: 'phone',
        href: 'https://www.nova.is/hafa-samband/panta-simtal',
        target: '_blank',
      }}
      color={serviceColorMap(type)}
      returnUrl={`/beta/${customerId}/thjonustur/${serviceId}`}
      title={t('breytaThjonustu.sidemenuTitle')}
      icon="mobileReturn"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            Upplýsingar og
          </Text>
          <Text variant="pSmallBold" color={serviceColorMap(type)} renderAs="span">
            {
              <a
                href={`https://www.nova.is/farsimi/${
                  variant?.id?.includes('frelsi') ? 'frelsi/spurningar' : 'askrift/spurningar'
                }`}
                target="__blank"
              >
                {''} spurningar
              </a>
            }
          </Text>
        </Box>
      }
    >
      <SelectContractType
        color={serviceColorMap(type)}
        productCategories={applicableProductsData}
        isCompany={isCompany?.customer?.isCompany || false}
        currentVariant={variant?.productName || ''}
        handleSelectedCategory={setselectedContractItem}
      />
      <InternetAndAbroadOverview
        applicableVariantsAsCardItems={productAsCardItem}
        onSelectVariant={handleSelectVariant}
        selectedVariant={selectedVariant}
      />

      <ConfirmInternetAndAbroad
        changePlan={ChangePlan.Product}
        currentContract={currentContractAsCardItem}
        applicableVariantsAsCardItem={selectedVariant}
        isCurrentlyPartOfAlltSaman={isAlltSaman}
        jumping={true}
      />
    </StepWrapper>
  );
};
Thjonustleidabreyting.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    serviceId: query.serviceId,
    namespacesRequired: ['thjonustubreyting', 'skref'],
  };
};

export default inject('steps')(observer(Thjonustleidabreyting));